﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>查看合同</title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="content_box">
                <div class="cell_box" style="width:32.82vw;height: 348px;">
                    <div class="cell_title">
                        <div class="cell_name">基本信息:</div>
                        <div class="cell_but"></div>
                    </div>
                    <div class="cell_cont">
                        <div class="form_box" style="margin-top: 0;">
                            <div class="form_name">采购合同编号</div>
                            <div class="form_cont">{{contractNo}}</div>
                        </div>
                        <div class="form_box">
                            <div class="form_name must_input">供应商</div>
                            <div class="form_cont">
                                <el-tooltip class="item" effect="dark" :disabled="!basicinfo.suppilerName" :content="basicinfo.suppilerName" placement="top">
                                    <el-select disabled class="public_input" v-model="basicinfo.suppilerId"  placeholder="请选择供应商">
                                        <el-option
                                            v-for="item in gysList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                                
                            </div>
                            <!-- <div class="form_but">
                                <el-button class="border_but" type="primary">添加供应商</el-button>
                            </div> -->
                        </div>
                        <div class="form_box">
                            <div class="form_name must_input">采购合同标题</div>
                            <div class="form_cont">
                                <el-tooltip class="item" effect="dark" :disabled="!basicinfo.title" :content="basicinfo.title" placement="top">
                                    <el-input disabled class="public_input" placeholder="请输入内容" v-model="basicinfo.title" clearable> </el-input>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="form_box">
                            <div class="form_name">备注</div>
                            <div class="form_cont">
                                <el-tooltip class="item" effect="dark" :disabled="!basicinfo.remark" :content="basicinfo.remark" placement="top">
                                    <el-input disabled type="textarea" :rows="3" placeholder="" v-model="basicinfo.remark"></el-input>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell_box" style="width: 41.99vw;margin-left: 1.71vw;height: 348px;">
                    <div class="cell_title">
                        <div class="cell_name">附件:</div>
                    </div>
                    <div class="cell_cont">
                        <div class="table_box border_table_box">
                            <el-table :data="fileList" height="100%" border style="width: 100%">
                                
                                <el-table-column prop="filename" align="center" show-overflow-tooltip label="名称"></el-table-column>
                                
                                <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人" width="120">
                                </el-table-column>
    
                                <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间" width="160">
                                </el-table-column>

                                <el-table-column align="center" show-overflow-tooltip label="操作" width="140">
                                    <template slot-scope="scope">
                                        <el-button @click="prevewImg(scope.row.filename, scope.row.fileurl)" type="text">查看</el-button>
                                        <el-button @click="downImg(scope.row.filename, scope.row.fileurl)" type="text">下载</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="cell_box" style="width: 100%;height: calc(100% - 348px);min-height: 366px;padding-top: 2.06vh;">
                    <div class="cell_title">
                        <div class="cell_name">材料明细:</div>
                    </div>
                    <div class="cell_cont">
                        <div class="table_box border_table_box">
                            <el-table :summary-method="getSummaries" ref="clmxTableRef" show-summary :data="clmxList" height="100%" border style="width: 100%">
                                
                                <el-table-column prop="materialName" align="center" min-width="100" show-overflow-tooltip label="名称"></el-table-column>
                                
                                <el-table-column prop="specificationName" align="center" show-overflow-tooltip label="规格" min-width="70">
                                </el-table-column>
    
                                <!--<el-table-column prop="addTimeStock" align="center" show-overflow-tooltip label="当前库存" min-width="94">
                                </el-table-column>

                                <el-table-column prop="addTimeApprNum" align="center" show-overflow-tooltip label="当前已进场" min-width="104">
                                </el-table-column>-->
    
                                <el-table-column prop="quantity" align="center" show-overflow-tooltip label="采购数量" min-width="160">
                                </el-table-column>

                                <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位" min-width="70">
                                </el-table-column>

                                <el-table-column prop="price" align="center" show-overflow-tooltip label="采购单价(元)" min-width="158">
                                </el-table-column>

                                <el-table-column prop="taxRate" align="center" show-overflow-tooltip label="税率" min-width="158">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.taxRate}}%</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="netwr" align="center" show-overflow-tooltip label="不含税金额(元)" min-width="120">
                                </el-table-column>

                                <el-table-column prop="taxes" align="center" show-overflow-tooltip label="税金(元)" min-width="80">
                                </el-table-column>

                                <el-table-column prop="priceTax" align="center" show-overflow-tooltip label="价税合计(元)" min-width="112">
                                </el-table-column>

                                <!-- <el-table-column prop="arrivalTime" align="center" show-overflow-tooltip label="预计到货时间" width="208">
                                </el-table-column> -->
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
                <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
            </ul>
        </div>
        <script src="../js/FileSaver.js"></script>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        previewList: [],
                        basicinfo: {
                            title: '',
                            suppilerId: '',
                            suppilerName: '',
                            remark: ''
                        },
                        contractNo: '',
                        gysList: [],
                        fileList: [],
                        clmxList: [],
                        netwrcont: 0,
                        taxescont: 0,
                        priceTaxcont: 0,
                        companyId: ''
					};
				},
				methods: {
                    getSummaries(param) {
                        var columns = param.columns
                        var data = param.data
                        var sums = [];
                        var that = this
                        setTimeout(function () {
                            that.$refs.clmxTableRef.doLayout()
                        }, 10)
                        for (var i = 0; i < columns.length; i++) {
                            if (i == 5) {
                                sums[5] = '总价';
                            } else {
                                sums[i] = ''
                            }
                            var netwrarr = []
                            var taxesarr = []
                            var priceTaxarr  = []
                            var netwrcont = 0
                            var taxescont = 0
                            var priceTaxcont = 0
                            for (var j = 0; j < data.length; j++) {
                                netwrarr.push(data[j].netwr)
                                taxesarr.push(data[j].taxes)
                                priceTaxarr.push(data[j].priceTax)
                            }
                            for (var j =0; j < netwrarr.length; j++) {
                                netwrcont += parseFloat(netwrarr[j])
                            }
                            for (var j =0; j < taxesarr.length; j++) {
                                taxescont += parseFloat(taxesarr[j])
                            }
                            for (var j =0; j < priceTaxarr.length; j++) {
                                priceTaxcont += parseFloat(priceTaxarr[j])
                            }
                            sums[6] = netwrcont;
                            sums[7] = taxescont;
                            sums[8] = priceTaxcont;
                            that.netwrcont = netwrcont 
                            that.taxescont = taxescont 
                            that.priceTaxcont = priceTaxcont 
                        }
                        return sums;
                    },
                    cancels () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    confirms () {
                        var that = this
                        if (!this.basicinfo.suppilerId || this.basicinfo.suppilerId == 0) {
                            this.$message({
                                message: '请选择供应商',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.basicinfo.title.length == 0) {
                            this.$message({
                                message: '请输入合同标题',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.fileList.length == 0) {
                            this.$message({
                                message: '请上传附件',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.clmxList.length == 0) {
                            this.$message({
                                message: '请添加材料明细',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var uploadFile = []
                        for (var i = 0; i < this.fileList.length; i++) {
                            uploadFile.push(this.fileList[i].fileid + ',' + this.fileList[i].filename + ',' + this.fileList[i].userName + ',' + this.fileList[i].uploadTime)
                        }
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/EditBuyContract',
                            data: JSON.stringify({
                                id: that.cghtId,
                                netwrCount: that.netwrcont,
                                taxesCount: that.taxescont,
                                priceTaxCount: that.priceTaxcont,
                                projectId: that.projectId,
                                uploadFile: uploadFile.join('|'),
                                suppilerId: that.basicinfo.suppilerId,
                                title: that.basicinfo.title,
                                remark: that.basicinfo.remark,
                                contMatList: that.clmxList
                            }),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '已提交',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    parent.layer.close(index);
                                }, 500)
                            }
                        });
                    },
                    countchange (row) {
                        // quantity 采购数量
                        // price 单价
                        // taxRate 税率
                        // netwr 不含税金额
                        // taxes 税金
                        // priceTax 价税合计
                        if (row.taxRate > 1) {
                            row.taxRate = 1
                        }
                        if (row.taxRate < 0) {
                            row.taxRate = 0
                        }
                        if (row.price < 0) {
                            row.price = 0
                        }
                        if (row.quantity < 1) {
                            row.price = 1
                        }
                        row.priceTax = (row.quantity * row.price).toFixed(2)
                        row.taxes = (row.quantity * row.price * row.taxRate).toFixed(2)
                        row.netwr = (row.priceTax - row.taxes).toFixed(2)
                    },
                    prevewImg (filename, urls) {
                        if (getFileType(filename) == 'IMG') {
                            this.previewList = [urls];
                            setTimeout(function () {
                                var viewer = new Viewer(document.getElementById('jq22'), {
                                    hide: function () {
                                        viewer.destroy();
                                    }
                                });
                                viewer.show();
                            }, 10);
                            return false
                        }
                        if (getFileType(filename) == 'PDF') {
                            parent.layer.open({
                                type: 2,
                                title: 'pdf预览',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['98%', '98%'],
                                content: '/ApsPublic/pdf/web/viewer.html?file=' + encodeURIComponent(urls),
                                end: function () { }
                            });
                            return false
                        }
                        publicdownFile(filename, urls)
                    },
                    downImg (filename, urls) {
                        publicdownFile(filename, urls)
                    },
                    removeImg (arr, index, types) {
                        var title = '此操作将永久删除该文件, 是否继续?'
                        if (types == 1) {
                            title = '此操作将永久删除该数据, 是否继续?'
                        }
                        this.$confirm(title, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            arr.splice(index, 1)
                        }).catch(function () {
                        });
                    },
                    httprequest (file) {
                        var that = this
                        xLoading(true, '正在上传')
                        var formData = new FormData();
						formData.append('files', file.file);
						$.ajax({
							type: 'post',
							url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
							data: formData,
							dataType: 'json',
							contentType: false,
							processData: false,
							success: function(res) {
                                xLoading(false)
								if (!res.success) {
									that.$message({
										message: res.msg,
										type: 'error'
									});
									return false;
                                }
                                var newobj = {
                                    fileid: res.data.fileId,
                                    filename: res.data.fileName,
                                    fileurl: res.data.ossUrl,
                                    uploadTime: res.data.uploadTime,
                                    userName: res.data.userName
                                }
                                that.fileList.push(newobj)
							}
						});
                    },
                    chioceClmx () {
                        var that = this
                        var selectArr = []
                        for (var i = 0; i < this.clmxList.length; i++) {
                            selectArr.push({
                                materialId: this.clmxList[i].materialId,
                                specificationId: this.clmxList[i].specificationId
                            })
                        }
                        parent.$('#publicValue').val('')
                        parent.layer.open({
                            type: 2,
                            title: '选择材料和规格',
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['52.08%', '64.81%'],
                            // area: ['91.91%', '72.16%'],
                            content: '/ApsPublic/publicList/clmxList.html?projectId=' +  that.projectId +'&selectArr='+ encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                            end: function() {
                                setTimeout(function () {
                                    if (parent.$('#publicValue').val()) {
                                        var newList = JSON.parse(parent.$('#publicValue').val())
                                        var newArr = []
                                        for (var i = 0; i < newList.length; i++) {
                                            newArr.push({
                                                addTimeStock: newList[i].sumStock,
                                                addTimeApprNum: newList[i].sumApproch,
                                                quantity: 1,
                                                price: 0,
                                                taxRate: 0,
                                                netwr: 0,
                                                taxes: 0,
                                                priceTax: 0,
                                                arrivalTime: timeFormat(new Date(), 1),
                                                materialName: newList[i].materialName,
                                                materialId: newList[i].materialId,
                                                specificationId: newList[i].specificationId,
                                                specificationName: newList[i].specificationName,
                                                unit: newList[i].unit,
                                            })
                                        }
                                        that.clmxList = that.clmxList.concat(newArr)
                                    }
                                }, 10)
                            }
                        });
                    },
                    getGysList () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
			                    'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/GetPartnerList?typeId=1',
                            data: JSON.stringify({
                                companyId: that.companyId,
                                page: 1,
                                pageSize: 99999
                            }),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.gysList = res.data
                            }
                        });
                    },
                    getDetail () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
			                    'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/GetBuyContract',
                            data: JSON.stringify({
                                id: that.cghtId
                            }),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.basicinfo = {
                                    title: res.data.title,
                                    suppilerId: res.data.suppilerId,
                                    remark: res.data.remark
                                }
                                if (res.data.uploadFile.length > 0) {
                                    for (var i = 0; i < res.data.uploadFile.split('|').length; i++) {
                                        that.fileList.push({
                                            fileid: res.data.uploadFile.split('|')[i].split(',')[0],
                                            filename: res.data.uploadFile.split('|')[i].split(',')[1],
                                            fileurl: baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + res.data.uploadFile.split('|')[i].split(',')[0],
                                            uploadTime: res.data.uploadFile.split('|')[i].split(',')[3],
                                            userName: res.data.uploadFile.split('|')[i].split(',')[2],
                                        })
                                    }
                                }
                                if (res.data.contMatList.length > 0) {
                                    that.clmxList = res.data.contMatList
                                }
                                that.contractNo = res.data.contractNo
                            }
                        });
                    }
				},
				mounted() {
                    this.showApp = true;
                    this.projectId = getQuerys('projectId')
                    this.cghtId = getQuerys('cghtId')
                    this.companyId = getQuerys('companyId')
                    this.getDetail()
                    this.getGysList()
				}
			});
		</script>
	</body>
	<style>
		.content_box {
            padding: 2.06vh 2.27vw 3.09vh;
            height: calc(100% - 20px);
            overflow: auto;
        }
        .cell_cont {
            padding: 3.09vh 2.27vw;
            border: 1px solid #EBEBEB;
            height: calc(100% - 52px);
        }
        .cell_box {
            float: left;
        }
        .cell_title {
            display: flex;
            align-items: center;
            padding: 10px 0;
            height: 52px;
        }
        .cell_but {
            padding-left: 10px;
        }
        .form_box {
            display: flex;
            width: 100%;
            margin-top: 20px;
        }
        .form_name {
            line-height: 32px;
            width: 104px;
            min-width: 104px;
            padding-right: 10px;
            text-align: right;
        }
        .form_cont {
            display: flex;
            align-items: center;
            line-height: 1;
            flex: 1;
            flex-wrap: wrap;
        }
        .border_table_box {
            height: 100%;
        }
        .table_input .el-date-editor.el-input, .table_input .el-date-editor.el-input__inner {
            width: 100%;
        }
        .table_nums .el-input-number{
            width: 100%;
            height: 24px;
            line-height: 24px;
        }
        .table_nums .el-input-number__decrease, .table_nums .el-input-number__increase {
            height: 22px;
            width: 24px;
            background: #fff;
        }
        .table_nums .el-input__inner {
            height: 24px;
            text-align: center;
            line-height: 24px;
            padding: 0 24px;
        }
        .el-input.is-disabled .el-input__inner {
            color: #333333;
            background: #fff;
        }
        .el-textarea.is-disabled .el-textarea__inner {
            color: #333333;
            background: #fff;
        }
	</style>
</html>
